import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
//state和translation
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")



    //状态机切换
    Rectangle {
        id: root
        width: 100;
        height: 100
        state: "normal"
        states: [
            State {
                name: "normal"
                PropertyChanges { target: root; color: "black"; }
            },
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red" ;width:200; }
            },
            State {
                name: "blue_color"
                PropertyChanges { root.color: "blue";root.height: 200; }
            }
        ]
        MouseArea{
            anchors.fill: parent
            onPressed: {
                root.state = "red_color"
            }
            onReleased: {
                root.state = "blue_color"
            }
        }
    }

    //动画
    Rectangle {
        anchors.top: root.bottom
        anchors.topMargin: 10
        id: flashingblob
        width: 75;
        height: 75
        color: "blue"
        opacity: 1
        MouseArea {
            id: mouseArea;
            anchors.fill: parent
            onClicked: {
                animationColor.start()
                animationOpacity.start()
                animationWidth.start()
            }
        }

        PropertyAnimation {
            id: animationColor
            target: flashingblob
            properties: "color"
            to: "green"
            duration: 1000
        }

        NumberAnimation {
            id: animationOpacity
            target: flashingblob
            property: "opacity"
            from: 0.1
            to:1
            duration: 2000
        }

        NumberAnimation {
            id: animationWidth
            target: flashingblob
            property: "width"
            from: 75
            to:150
            duration: 2000
        }
    }


    Rectangle {
        id:rect
        anchors.top: flashingblob.bottom
        anchors.topMargin: 10
        color: "red"
        width: 100
        height: 100
        PropertyAnimation on x{
            to: 100
            duration: 1000
        }
        PropertyAnimation on y{
            to: 100
            duration: 1000
        }
        PropertyAnimation on width{
            to: 300
            duration: 2000
        }
        PropertyAnimation on color{
            to: "yellow"
            duration: 2000
        }
    }
    //队列动画
    Rectangle {
        id: queueAnimation
        anchors.left: root.right
        anchors.leftMargin: 10
        color: "red"
        width: 100
        height: 100
        SequentialAnimation on color {
            ColorAnimation {
                to: "yellow"
                duration: 1000
            }
            ColorAnimation {
                to: "blue"
                duration: 1000
            }
        }
    }
    //
    Rectangle {
        anchors.left: queueAnimation.right
        anchors.leftMargin: 10
        color: "red"
        width: 100
        height: 100
        id:button
        state: "RELEASSED"
        MouseArea{
            anchors.fill: parent
            onPressed: button.state = "PRESSED"
            onReleased: button.state = "RELEASSED"
        }
        states: [
            State {
                name: "PRESSED"
                PropertyChanges {
                    target: button
                    color:"lightblue"
                }
            },
            State {
                name: "RELEASSED"
                PropertyChanges {
                    target: button
                    color:"lightsteelblue"
                }
            }
        ]
        transitions: [
            Transition {
                from: "PRESSED"
                to: "RELEASSED"
                ColorAnimation {
                    target: button
                    duration: 1000
                }
            },
            Transition {
                from: "RELEASSED"
                to: "PRESSED"
                ColorAnimation {
                    target: button
                    duration: 1000
                }
            }
        ]
    }
}
